<template>
  <div class="people-all">
    <div class="people-all-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="已验证"></el-radio-button>
        <el-radio-button label="待验证"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="people-all-table" v-if="radio1 == '已验证'">
      <el-table :data="UpShowTableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" min-width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="180">
        </el-table-column>
        <el-table-column prop="gender" label="性别" min-width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="180">
        </el-table-column>
        <el-table-column prop="address" label="住址" min-width="180">
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="180">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            > -->
            <el-button
              size="mini"
              type="danger"
              @click="handleEditDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 15]"
          :page-size="upPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="upTotal"
        >
        </el-pagination>
      </div>
    </div>
    <div class="people-all-table" v-else>
      <el-table :data="waitShowTableData" style="width: 100%">
        <!-- <el-table-column prop="time" label="日期" min-width="180">
        </el-table-column> -->
        <el-table-column prop="name" label="姓名" min-width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="180">
        </el-table-column>
        <el-table-column prop="gender" label="性别" min-width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="180">
        </el-table-column>
        <el-table-column prop="address" label="住址" min-width="180">
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit2(scope.$index, scope.row)"
              >通过验证</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="waitCurrentPage"
          :page-sizes="[8, 10, 15]"
          :page-size="waitPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="waitTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "@/network/request.js";
export default {
  data() {
    return {
      radio1: "已验证",
      upTotal: 0, //总条数
      upPageSize: 8,
      currentPage: 1, //默认显示页数
      tableData: [],
      UpShowTableData: [],

      waitTotal: 0, //总条数
      waitPageSize: 8,
      waitCurrentPage: 1, //默认显示页数
      waitTableData: [],
      waitShowTableData: [],
      formLabelWidth: "100px", //弹出框框度
      numberValidateForm: {
        //弹出框绑定数据
        water: "",
        electric: "",
      },
    };
  },
  created() {
    this.requestData();
    /*
    request({
      url: "/people-all", //传入confing,在baseURL后面的值
    })
      .then((res) => {
        console.log(res); //res中含有请求的data等数据
        // console.log("res");
        this.tableData = res.data.data.map((res) => {
          // res.gender == 1 ? "男" : "女";
          if (res.gender == 1) {
            res.gender = "男";
            return res;
          } else {
            res.gender = "女";
            return res;
          }
        });
        console.log(this.tableData);
        this.totalNum();
        this.dataShow(this.upPageSize);
      })
      .catch((err) => {
        console.log(err);
      });
      */
  },
  methods: {
    requestData() {
      // console.log("555");
      request({
        url: "/people-all", //传入confing,在baseURL后面的值
      })
        .then((res) => {
          // console.log(res); //res中含有请求的data等数据
          // console.log("res");
          this.tableData = res.data.data.map((res) => {
            // res.gender == 1 ? "男" : "女";
            if (res.gender == 1) {
              res.gender = "男";
              return res;
            } else {
              res.gender = "女";
              return res;
            }
          });
          this.totalNum();
          this.dataShow(this.upPageSize);
        })
        .catch((err) => {
          console.log(err);
        });

      request({
        url: "/people-info",
      })
        .then((res) => {
          // console.log(res); //res中含有请求的data等数据
          // console.log("res");
          this.waitTableData = res.data.data.map((res) => {
            // res.gender == 1 ? "男" : "女";
            if (res.gender == 1) {
              res.gender = "男";
              return res;
            } else {
              res.gender = "女";
              return res;
            }
          });
          this.totalNum2();
          this.dataShow2(this.waitPageSize);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    totalNum() {
      this.upTotal = this.tableData.length;
    },
    dataShow(num) {
      this.UpShowTableData = this.tableData.slice(0, num);
      this.upPageSize = num;
    },
    // up每页数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.dataShow(val);
    },
    // up每页数据，第几页
    handleCurrentChange(val) {
      console.log(`当前页 ${val} 条`);
      //设置开始
      let start = this.upPageSize * val - this.upPageSize;
      // 设置结束长度
      let end = this.upPageSize * val; //长度判断
      console.log(end);
      end = end > this.tableData.length ? this.tableData.length : end;
      this.UpShowTableData = this.tableData.slice(start, end);
    },

    totalNum2() {
      this.waitTotal = this.waitTableData.length;
    },
    dataShow2(num) {
      this.waitShowTableData = this.waitTableData.slice(0, num);
      this.waitPageSize = num;
    },
    // up每页数量
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.dataShow2(val);
    },
    // 每页数据，第几页
    handleCurrentChange2(val) {
      console.log(`当前页 ${val} 条`);
      //设置开始
      let start = this.waitPageSize * val - this.waitPageSize;
      // 设置结束长度
      let end = this.waitPageSize * val; //长度判断
      console.log(end);
      end = end > this.waitTableData.length ? this.waitTableData.length : end;
      this.waitShowTableData = this.waitTableData.slice(start, end);
    },
    // 通过验证
    handleEdit2(index, row) {
      // this.dialogFormVisible = true;
      console.log(index, row);
      let gender = row.gender == "男" ? 1 : 2;

      console.log(gender);
      request({
        method: "post",
        url: "/set_all_people",
        data: {
          openid: row.openid,
          name: row.name,
          age: row.age,
          gender: gender,
          phoneNum: row.phone,
          address: row.address,
        },
      })
        .then((res) => {
          console.log(res);
          this.requestData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除
    handleEditDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          request({
            method: "post",
            url: "/delete_all_people", //传入confing,在baseURL后面的值
            data: {
              openid: row.openid,
            },
          })
            .then((res) => {
              this.requestData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.people-all {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .people-all-start {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    margin-bottom: 10px;
    @include center;
  }
  .people-all-table {
    // height: 100%;
    background-color: #ffffff;
    padding: 0 10px;
    box-sizing: border-box;
    // overflow: scroll;
    // overflow-y: scroll;
    .pagination {
      padding-top: 10px;
      padding-bottom: 100px;
      display: flex;
      @include right;
      background-color: #ffffff;
    }
  }
}
</style>
